<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
  <title>登录页面 - 极安物流后台管理系统</title>
  <link rel="icon" href="/static/images/favicon.ico" type="image/ico">
  <link href="/static/css/bootstrap.min.css" rel="stylesheet">
  <link href="/static/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="/static/css/style.min.css" rel="stylesheet">
  <style>
    body {
      background-color: #fff;
    }

    .lyear-login-box {
      position: relative;
      overflow-x: hidden;
      width: 100%;
      height: 100%;
      -webkit-transition: 0.5s;
      -o-transition: 0.5s;
      transition: 0.5s;
    }

    .lyear-login-left {
      width: 50%;
      top: 0;
      left: 0;
      bottom: 0;
      position: fixed;
      height: 100%;
      z-index: 555;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
    }

    .lyear-overlay {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 10;
      background: rgba(0, 0, 0, 0.5);
    }

    .lyear-logo {
      margin-bottom: 50px;
    }

    .lyear-featured {
      z-index: 12;
      position: absolute;
      bottom: 0;
      padding: 30px;
      width: 100%;
    }

    .lyear-featured h4 {
      color: #fff;
      line-height: 32px;
    }

    .lyear-featured h4 small {
      color: #fff;
      display: block;
      text-align: right;
      margin-top: 15px;
    }

    .lyear-login-right {
      margin-left: 50%;
      position: relative;
      z-index: 999;
      padding: 100px;
      background-color: #fff;
    }

    @media screen and (max-width: 1024px) {
      .lyear-login-right {
        padding: 50px;
      }
    }

    @media screen and (max-width: 820px) {
      .lyear-login-left {
        width: 100%;
        position: relative;
        z-index: 999;
        height: 300px;
      }

      .lyear-login-right {
        margin-left: 0;
      }
    }

    @media screen and (max-width: 480px) {
      .lyear-login-right {
        padding: 50px;
      }
    }

    @media screen and (max-width: 320px) {
      .lyear-login-right {
        padding: 30px;
      }
    }
  </style>
</head>

<body>
<div class="lyear-login-box">
  <div class="lyear-login-left" style="background-image: url('/static/images/login-bg-4.jpg')">
    <div class="lyear-overlay"></div>
    <div class="lyear-featured">
      <h4>愿你有好运气，如果没有，愿你在不幸中学会慈悲；愿你被很多人爱，如果没有，愿你在寂寞中学会宽容。<small> - 刘瑜《愿你慢慢长大》</small></h4>
    </div>
  </div>
  <div class="lyear-login-right">
    <input type="hidden" th:value="${session.msg}" id="msg"/>
    <div class="lyear-logo text-center">
      <h3>极安物流后台管理系统</h3>
    </div>
    <form action="javascript:;" method="post" id="login_form">
      <div class="form-group">
        <label for="username">用户名</label>
        <input type="text" class="form-control" id="username" placeholder="请输入您的用户名" autofocus required>
      </div>

      <div class="form-group">
        <label for="password">密码</label>
        <input type="password" class="form-control" id="password" placeholder="请输入您的密码" required>
      </div>

      <div class="form-group">
        <label for="captcha">验证码</label>
        <div class="row">
          <div class="col-xs-7">
            <input type="text" name="captcha" id="captcha_input" class="form-control" placeholder="验证码" required>
          </div>
          <div class="col-xs-5">
            <img src="/checkCode" class="pull-right" id="captcha" style="cursor: pointer;"
                 onclick="this.src = this.src + '?d=' + Math.random();" title="点击刷新" alt="captcha">
          </div>
        </div>
      </div>

      <div class="form-group">
        <button class="btn btn-block btn-primary" type="submit" id="submit">立即登录</button>
      </div>
    </form>

  </div>
</div>

<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/bootstrap-notify.min.js"></script>
<script type="text/javascript" src="/static/js/lightyear.js"></script>
<script src="/static/js/mycommons.js"></script>
<script type="text/javascript">
  $(function () {
    let msg = $("#msg").val()
    if (msg !== undefined) {
      lightyear.notify("请先登录", 'danger', 1500, 'mdi mdi-emoticon-happy', 'top', 'center')
    }
  })
  /*
    登录提交表单
     */
  $("#login_form").submit(function () {
    let captcha = $.trim($("#captcha_input").val())
    if (captcha.length === 0) {
      msgNotify("请输入验证码", 'warning', 1500)
      return false
    }

    let username = $.trim($("#username").val())
    let password = $.trim($("#password").val())
    $.post("/login", {
      username: username,
      password: password,
      captcha: captcha
    }, function (res) {
      if (res.flag) {
        msgNotify(res.msg, 'success', 1500)
        setTimeout(function () {
          location.href = "http://localhost:8080/indexPage"
        }, 1500)
      } else {
        $("#captcha").attr("src", "/checkCode?d="  + Math.random())
        msgNotify(res.msg, 'danger', 1500)
        $("#captcha_input").val("")
      }
    })
  })

</script>
</body>
</html>